<template>
  <el-row id="problem-audit-box">
    <Breadcrumb :breadcrumb="breadcrumb"/>
    <div id="condition-box">

      <el-row id="problem-search-box filter-box">
        <el-col :span="10" :offset="14" class="search-box">
            <el-input clearable	 placeholder="搜索题目" v-model="searchValue" class="input-with-select" @input="refreshProblemList" >
                <el-button slot="append" icon="el-icon-search" @click="refreshProblemList"></el-button>
            </el-input>
        </el-col>
      </el-row>

      <el-row id="filter-box">
        <el-col :span="9" id="problem-type-box">
          <el-row>
            <el-col :span="4">
              <label class="tag1">题型:</label>
            </el-col>
            <el-col :span="20" class="radio-group">
              <el-radio-group v-model="problemTypeValue" @change="refreshProblemList">
                <el-radio label="全部">全部</el-radio>
                <el-radio label="选择题">选择题</el-radio>
                <el-radio label="判断题">判断题</el-radio>
                <el-radio label="简答题">简答题</el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <el-row id="filter2-box">
        <el-col :span="9" id="problem-difficulty-box">
          <el-row>
            <el-col :span="4">
              <label class="tag1">难度:</label>
            </el-col>
            <el-col :span="20" class="radio-group">
              <el-radio-group v-model="problemDifficultyValue" @change="refreshProblemList">
                <el-radio label="全部">全部</el-radio>
                <el-radio label="简单">简单</el-radio>
                <el-radio label="中等">中等</el-radio>
                <el-radio label="困难">困难</el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="10" id="problem-audit-status-box">
          <el-row>
            <el-col :span="4">
              <label class="tag1">审核状态:</label>
            </el-col>
            <el-col :span="20" class="radio-group">
              <el-radio-group v-model="problemAuditStatusValue" @change="refreshProblemList">
                <el-radio label="全部">全部</el-radio>
                <el-radio label="已审核">已审核</el-radio>
                <el-radio label="未审核">未审核</el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>

    <el-table
      id="problem-table"
      :data="problemData"
      style="width: 100%"
      :header-cell-style="{ background: '#fafafa' }"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column id="fold-column-box" type="expand" width="70" label="查看">
        <template slot-scope="props">
          <el-form
            label-position="left"
            inline
            class="demo-table-expand"
            v-if=" props.row.typeName== '选择题'"
          >
            <el-form-item label="题目">
              <span>{{ props.row.problem }}</span>
            </el-form-item>
            <el-form-item label="题目类型">
              <span>{{ props.row.typeName }}</span>
            </el-form-item>
            <el-form-item label="选项A">
              <span>{{ props.row.choiceOp1 }}</span>
            </el-form-item>
            <el-form-item label="选项B">
              <span>{{ props.row.choiceOp2 }}</span>
            </el-form-item>
            <el-form-item label="选项C">
              <span>{{ props.row.choiceOp3 }}</span>
            </el-form-item>
            <el-form-item label="选项D">
              <span>{{ props.row.choiceOp4 }}</span>
            </el-form-item>
            <el-form-item label="答案">
              <span>{{ props.row.choiceAnsw }}</span>
            </el-form-item>
            <el-form-item label="解析">
              <span>{{ props.row.choiceParse }}</span>
            </el-form-item>
            <el-form-item label="难度">
              <span>{{ props.row.difficulty }}</span>
            </el-form-item>
            <el-form-item label="审核状态">
              <span>{{ props.row.audit }}</span>
            </el-form-item>
          </el-form>
          <el-form
            label-position="left"
            inline
            class="demo-table-expand"
            v-if="props.row.typeName== '简答题'"
          >
            <el-form-item label="题目">
              <span>{{ props.row.problem }}</span>
            </el-form-item>
            <el-form-item label="题目类型">
              <span>{{ props.row.typeName }}</span>
            </el-form-item>
            <el-form-item label="答案">
              <span>{{ props.row.essayAnsw }}</span>
            </el-form-item>
            <el-form-item label="解析">
              <span>{{ props.row.essayParse }}</span>
            </el-form-item>
            <el-form-item label="难度">
              <span>{{ props.row.difficulty }}</span>
            </el-form-item>
            <el-form-item label="审核状态">
              <span>{{ props.row.audit }}</span>
            </el-form-item>
          </el-form>
          <el-form
            label-position="left"
            inline
            class="demo-table-expand"
            v-if="props.row.typeName== '判断题'"
          >
            <el-form-item label="题目">
              <span>{{ props.row.problem }}</span>
            </el-form-item>
            <el-form-item label="题目类型">
              <span>{{ props.row.typeName }}</span>
            </el-form-item>
            <el-form-item label="答案">
              <span>{{ props.row.trueOrFalseAnsw }}</span>
            </el-form-item>
            <el-form-item label="解析">
              <span>{{ props.row.trueOrFalseParse }}</span>
            </el-form-item>
            <el-form-item label="难度">
              <span>{{ props.row.difficulty }}</span>
            </el-form-item>
            <el-form-item label="审核状态">
              <span>{{ props.row.audit }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column label="序号" type="index" width="90">
        <template slot-scope="scope">
            <span v-text="getIndex(scope.$index)"> </span>
        </template>
      </el-table-column>
      <el-table-column prop="problem" label="题目" width="540"></el-table-column>
      <el-table-column prop="typeName" label="题目类型" width="100"></el-table-column>
      <el-table-column prop="difficulty" label="难度" width="100"></el-table-column>
      <el-table-column prop="audit" label="审核状态" width="100"></el-table-column>

      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="auditoneProblemButton(scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- <el-row id="pagination-box">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="1000"
        prev-text="上一页"
        next-text="下一页"
      ></el-pagination>
    </el-row> -->
    <el-row id="pagination-box">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-size="pageSize"
        :total="total"
        layout="total,prev, pager, next "
        prev-text="上一页"
        next-text="下一页"
      >
      </el-pagination>
    </el-row>
  </el-row>
</template>
<script>
import Breadcrumb from '@/components/common/Breadcrumb';
import { mapState } from 'vuex'
export default {
  name: "Problem",
  components: {
    Breadcrumb,
  },
  data() {
    return {
      breadcrumb:[
        {name:"题目管理",path:"problem"},
        {name:"审核列表",path:""},
      ],
      pageNum: 1 ,
      pageSize: 5 ,
      total: 10 ,
      allData:[],
      searchValue: "",
      // courseNameValue: "大学英语",
      problemTypeValue: "全部",
      problemLabelValue: "",
      problemDifficultyValue: "全部",
      problemAuditStatusValue: "全部",
      problemData: [],
    };
  },
  created() {
    this.GetProblemList(
      this.course.courseName,
      this.problemTypeValue,
      this.problemDifficultyValue,
      this.problemAuditStatusValue,
      this.searchValue
    );
  },
  methods: {
    //分页
    getTabelData() {
      //allData为全部数据
      if (this.allData) {
      this.problemData = this.allData.slice(
        (this.pageNum - 1) * this.pageSize,
        this.pageNum * this.pageSize
      );
      this.total=this.allData.length}
    },
    // 分页序号
    getIndex($index) {
      return (
        (this.pageNum - 1) * this.pageSize + $index + 1
      );
    },
    goRoute(location) {
      this.$router.push(location);
    },
    refreshProblemList() {
      this.GetProblemList(
        this.course.courseName,
        this.problemTypeValue,
        this.problemDifficultyValue,
        this.problemAuditStatusValue,
        this.searchValue
      );
    },
    GetProblemList(
      courseName,
      problemTypeValue,
      problemDifficultyValue,
      problemAuditStatusValue,
      searchValue
    ) {
      this.axios
        .get(
          "/search/" +
            courseName +
            "/" +
            problemTypeValue +
            "/" +
            problemDifficultyValue +
            "/" +
            problemAuditStatusValue+
            "/"+searchValue
        )
        .then(response => {
          if (response.status == 200) {
            this.allData = response.data.data;
            this.problemData=[];
            this.pageNum=1
            this.getTabelData();
          }
          // console.log(this.problemData);
          // console.log(this.course.courseName);
        })
        .catch(error => alert(error));
    },
    auditoneProblemButton(row) {
      // console.log(row)
      this.$confirm("此操作将审核通过该题目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          if (row.audit == "已审核") {
            this.$message({
              type: "error",
              message: "该题已审核!"
            });
          }
          else if (row.typeName == "选择题") {
            let choiceId = row.choiceId;
            console.log(choiceId);
            this.AuditChoiceProblem(choiceId);
          } else if (row.typeName == "判断题") {
            let trueOrFalseId = row.trueOrFalseId;
            console.log(trueOrFalseId);
            this.AuditTrueOrFalseProblem(trueOrFalseId);
          } else if (row.typeName == "简答题") {
            let essayId = row.essayId;
            console.log(essayId);
            this.AuditEssayIdProblm(essayId);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    AuditChoiceProblem(choiceId) {
      this.axios
        .post("/choice/audit", { choiceId: choiceId })
        .then(response => {
          if (response.data.code == 200) {
            this.refreshProblemList();
            this.$message({
              type: "success",
              message: "审核通过!"
            });
          } else {
            this.$message({
              type: "error",
              message: "审核失败!"
            });
          }
        })
        .catch(error => alert(error));
    },
    AuditTrueOrFalseProblem(trueOrFalseId) {
      this.axios
        .post("/trueOrFalse/audit", { trueOrFalseId: trueOrFalseId })
        .then(response => {
          if (response.data.code == 200) {
            this.refreshProblemList();
            this.$message({
              type: "success",
              message: "审核通过!"
            });
          } else {
            this.$message({
              type: "error",
              message: "审核失败!"
            });
          }
        })
        .catch(error => alert(error));
    },
    AuditEssayIdProblm(essayId) {
      this.axios
        .post("/essay/audit", { essayId: essayId })
        .then(response => {
          if (response.data.code == 200) {
            this.refreshProblemList();
            this.$message({
              type: "success",
              message: "审核通过!"
            });
          } else {
            this.$message({
              type: "error",
              message: "审核失败!"
            });
          }
        })
        .catch(error => alert(error));
    },
    handleSizeChange(pageSize) {
      this.pageSize=pageSize,
      this.getTabelData()
    },
    handleCurrentChange(pageNum) {
      this.pageNum=pageNum,
      this.getTabelData()
    } 
  },
  computed:{
    ...mapState('course', {
        course:'course',
    }),
  },
};
</script>
<style scoped>
/* 自定义的样式 */
#problem-audit-box {
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 20px;
  background-color: #f6fafb !important;

  height: 680px;
}
#condition-box {
  height: auto;
  padding-bottom: 30px;
  font-size: 14px;
  font-family: "Microsoft YaHei", 微软雅黑, "Arial", "Hiragino Sans GB",
    "Helvetica", "sans-serif";
}
.search-box{
  margin-top: -70px;
}
#problem-search-box {
  padding-bottom: 20px;
  width: 100%;
  background-color: #ffffff;
  border-bottom: 1px solid #dcdfe6 !important;
  margin-bottom: 30px;
}

.tag1 {
  font-weight: normal;
  line-height: 40px;
  margin-bottom: 0px;
}

#filter-box {
  height: 40px;
}

#problem-label-box {
  height: 40px;
}
#filter2-box {
  padding-top: 20px;
}

/* line-height: 40px; */
/* text-align:center; */
/* :deep(){

} */
</style>
<style>
/* 修改element-ui的样式 */
.radio-group {
  display: block;
  line-height: 40px;
}
.el-radio-group {
  height: 16px;
}
.el-radio {
  margin-bottom: 0px;
}
.buttonStyle1 {
  width: 100px;
  height: 30px;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

#problem-label {
  width: 400px;
  height: 40px !important;
}

/* 题目表格 */
#problem-table .cell {
  color: #000000;
  text-align: center;
  font-weight: 500;
}
#problem-table .el-table_1_column_3 .cell {
  text-align: center;
}
#problem-table th:nth-child(4) .cell,
#problem-table .el-table__row td:nth-child(4) .cell {
  text-align: left !important;
  padding-left: 25px;
  padding-right: 25px;
}

.demo-table-expand {
  padding-right: 20px;
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
  top: 7px !important;
}

.el-form-item {
  padding-left: 35px;
}

.el-form-item__label {
  color: #99a9bf;
  font-size: 14px;
  font-weight: normal;
  line-height: 25px !important;
}
.el-form-item__content {
  line-height: 25px !important;
}

.el-table__row .el-button {
  font-size: 13px;
}

#problem-audit-box .el-form {
  background-color: #ffffff;
}

.el-checkbox__inner {
  width: 18px !important;
  height: 18px !important;
}
.el-checkbox__inner::after {
  height: 12px !important;
  left: 6px !important;
}

/* 详情 */
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

/* 详情 */
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}

#pagination-box .el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  border: 1px solid #ddd;
  font-weight: normal;
  font-size: 12px;
  padding: 0px 12px !important;
  height: 30px;
  line-height: 30px;
  color: #333 !important;
  background-color: #fff !important;
}
#pagination-box
  .el-pagination.is-background
  .el-pager
  li:not(.disabled).active {
  background-color: #267d90 !important;
  color: #fff !important;
}
#pagination-box {
  text-align: center;
  padding-top: 30px;
  padding-bottom: 40px;
}
</style>  